<template>
  <div class="disFlxAC">
    <div ref="operation_button" class="operation_button">
      <slot/>
    </div>
    <a-popover v-show="isFold" placement="bottom" @visibleChange="visibleChange">
      <a-button type="primary" ghost size="small" class="_ml-5">
        更多<a-icon type="more" class="fz-12" style="margin-left: 0;" />
      </a-button>
      <div slot="content" class="operation_button_group" ref="button_group">
        <slot/>
      </div>
    </a-popover>
  </div>
</template>

<script>
export default {
  props: {
    // 最多显示个数
    maxLength: {
      type: [Number, String],
      default: 2
    }
  },
  data () {
    return {
      isFold: false,
    }
  },
  mounted() {
    this.domInit()
  },
  methods: {
    domInit() {
      const children = this.$refs[`operation_button`].children;
      this.$nextTick(() => {
        if(this.maxLength){
          this.isFold = children.length > this.maxLength; // 是否显示更多
          if(this.isFold){
            for (let i = 0; i < children.length; i++) {
              children[i].style.display = i >= this.maxLength ? 'none' : 'inline-block'
            }
          }
        }
      })
    },
    visibleChange(visible) {
      if(!visible) return
      this.$nextTick(()=>{
        if(this.maxLength && this.isFold){
          const children = this.$refs[`button_group`].children;
          for (let i = 0; i < children.length; i++) {
            children[i].style.display = i >= this.maxLength ? 'block' : 'none'
          }
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.operation_button /deep/ button+button{
  margin-left: 5px;
}
.operation_button_group /deep/ button+button{
  display: block;
  margin-top: 5px;
}
</style>